<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>主页</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link th:href="@{../assets/css/page.css}" rel="stylesheet" />
<link th:href="@{../assets/css/NGR.css}" rel="stylesheet" />
<link th:href="@{../assets/css/platformDemo.css}" rel="stylesheet" />

<!--[if lt IE 9]>
	<script th:src="@{../assets/js/html5shiv.js}"></script>
	<script th:src="@{../assets/js/respond.min.js}"></script>
<![endif]-->
<!-- <style>
.inside-header {
	    background:url(../assets/img/home/home.png);
	    width:100%;
	    height: 100%;
	    background-repeat : no-repeat;
	    background-color: #DAE8F5;
	}


</style>
 -->
</head>
<body class="inside-header inside-aside ">
<div id="main" role="main">

<div class="widget-body no-padding">



<div id="map" style="width: 100%; height: 100%; margin: 0; padding: 0; position:absolute;background-color: #DAE8F5"></div>



</div></div>
<script type="text/javascript" th:src="@{../assets/libs/jquery/dist/jquery.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap/dist/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/toastr/toastr.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/extensions/export/bootstrap-table-export.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/layer/src/layer.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/page.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/NGR.min.js}"></script>
<script  th:inline="javascript">
//var str_x=/*[[${str_x}]]*/
//var str_y=/*[[${str_y}]]*/
var heatmap1="";
var heatmap;
var markersLayer_fire;
var markersLayer_point;
var color_value_history="red";
 var arr_history_all_road= new Array();
 var arr_history_all_route= new Array();
 var arr_layer_road= new Array();
 var arr_layer_route= new Array();
(function () {
window.map = new NGR.View('map', {
        //通过开发者平台获取AppKey
        AppKey: "f83a1f3ce8374d7fbda8931f71933fde" 
    });
window.res = new NGR.DataSource({
        //通过开发者平台获取AppKey
        AppKey: "f83a1f3ce8374d7fbda8931f71933fde" 
    });
window.layers = {};
  window.geomLayers = {};//图形
  var mapId = 2033;
 var markersLayer = NGR.layerGroup();
markersLayer_fire= NGR.layerGroup();
markersLayer_point= NGR.layerGroup();
  var control = NGR.control.floor();

  var onerror = function (e) {
    console.error(e, e.stack);
  };

// 请求楼层数据
  var loadPlanarGraph = function (planarGraphId) {
    res.requestPlanarGraph(planarGraphId).then(function (layerInfo) {
     // console.log(layerInfo);
      NGR.IO.fetch({
        url: '../assets/fonts/style.template.json',
        onsuccess: JSON.parse
      }).then(function (style) {
		map.clear();
		markersLayer.clearLayers();
		 layers.frame = NGR.featureLayer(layerInfo, {
            layerType: 'Frame',
            styleConfig: style
        });
         map.addLayer(layers.frame); // 将楼层框架图层添加到地图中去
        // 准备商铺图层
        layers.area = NGR.featureLayer(layerInfo, {
            layerType: 'Area',
            styleConfig: style
        });
        map.addLayer(layers.area); // 将商铺图层添加到地图中去

        // 准备商铺文字和图标图层
        layers.annotation = NGR.featureLayer(layerInfo.Area, {
            layerType: 'LogoLabel',
            styleConfig: style
        });
        // 准备公共设施图标图层
        layers.facility = NGR.featureLayer(layerInfo.Facility, {
            layerType: 'Facility',
            styleConfig: style
        });
        // 准备碰撞检测图层组
        layers.collision = NGR.layerGroup.collision({
            margin: 3
        });
       
        layers.collision.addLayer(layers.annotation); // 将商铺文字和图标图层添加到碰撞检测图层组中去
        layers.collision.addLayer(layers.facility); // 将公共设施图标图层添加到碰撞检测图层组中去
        map.addLayer(layers.collision); // 将碰撞检测图层组添加到地图中去
        map.addLayer(markersLayer_fire);
 		if(""!=heatmap1){
        heatmap=JSON.parse(heatmap1);
        }else{
        heatmap=JSON.parse("{\"features\": [{\"geometry\": { \"coordinates\": [0,0],\"type\": \"Point\"},\"type\": \"Feature\"}],\"type\": \"FeatureCollection\"}")
        }
        	 layers.heatMap = NGR.featureLayer(heatmap, {
            layerType: 'Heatmap',
            styleConfig: style
          });
		 map.addLayer(layers.heatMap);
			//<![CDATA[
			for(var s=0;s<arr_layer_road.length;s++){
			map.addLayer(arr_layer_road[s]);
			console.log(arr_layer_road[s]._latlngs);
					var marker_start = NGR.marker(arr_layer_road[s]._latlngs[0], {
				    icon: NGR.icon({
				      iconUrl: '../assets/img/start.png',
				      iconSize: [25, 25]
				    })
				  });
				var marker_end = NGR.marker(arr_layer_road[s]._latlngs[arr_layer_road[s]._latlngs.length-1], {
				    icon: NGR.icon({
				      iconUrl: '../assets/img/end.png',
				      iconSize: [25, 25]
				    })
				  });
				markersLayer.addLayer(marker_start);
				markersLayer.addLayer(marker_end);
			};
			for(var s=0;s<arr_layer_route.length;s++){
			map.addLayer(arr_layer_route[s]);
			console.log(arr_layer_route[s]._latlngs);
					var marker_start = NGR.marker(arr_layer_route[s]._latlngs[0], {
				    icon: NGR.icon({
				      iconUrl: '../assets/img/start.png',
				      iconSize: [25, 25]
				    })
				  });
				var marker_end = NGR.marker(arr_layer_route[s]._latlngs[arr_layer_route[s]._latlngs.length-1], {
				    icon: NGR.icon({
				      iconUrl: '../assets/img/end.png',
				      iconSize: [25, 25]
				    })
				  });
				markersLayer.addLayer(marker_start);
				markersLayer.addLayer(marker_end);
			};
			//]]>
			map.addLayer(markersLayer);
			map.addLayer(markersLayer_point);
        map.render();
        
      }).fail(onerror);
    }).fail(onerror);
  };
    var insertLine = function (parent ,innerHTML, className) {
        var line = NGR.DomUtil.create('p', className, parent);
        var item = NGR.DomUtil.create('a', 'item ' + className, line);
         item.innerHTML = innerHTML;

    };
// 初始化显示UI显示文字
    var info = NGR.DomUtil.create('div', 'platform-demo-info', document.body);
    insertLine(info, '救 援 疏 散 调 度 图', 'screen');



// 请求地图数据
  res.requestMap(mapId).then(function (mapInfo) {
    res.requestPOIChildren(mapInfo.poi).then(function(floors) {
      // 初始化楼层控件
      map.addControl(control);
      control.on('change', function (e) {
		map.removeLayer(layers.heatMap);
		markersLayer.clearLayers();
		arr_layer_road.splice(0,arr_layer_road.length);//清空保存图层的数组
		arr_history_all_road.splice(0,arr_history_all_road.length);//清空保存图层的数组
		arr_layer_route.splice(0,arr_layer_route.length);//清空保存图层的数组
		arr_history_all_route.splice(0,arr_history_all_route.length);//清空保存图层的数组
		areaAjax(e.to);
		roadAjax(e.to);
		routeAjax(e.to);
		fireAjax(e.to);
		nowAjax(e.to);
        control.setCurrentFloor(e.to, loadPlanarGraph);
      });
      control.setFloorList(floors);
		areaAjax(floors[4].id);
		roadAjax(floors[4].id);
		routeAjax(floors[4].id);
		fireAjax(floors[4].id)
		nowAjax(floors[4].id);
      control.setCurrentFloor(floors[4].id, loadPlanarGraph);
		
    }).fail(onerror);
  }).fail(onerror);

}).call(this);

function areaAjax(ifloor){
 $.ajax({
                url:"../home/findArea",
                type:"post",
                dataType:"json",
                 async: false ,
                data:{
                "ifloor":ifloor
                },
                success:function (data) {
               		 heatmap1=data.item;
                },
                error:function (error) {
					
                }
            })//ajax
}
function roadAjax(ifloor){
 $.ajax({
                url:"../home/findline",
                type:"post",
                dataType:"json",
                 async: false ,
                data:{
                "ifloor":ifloor,
                "iaddtype":0
                },
                success:function (data) {
             
               		//<![CDATA[
               		for(var i=0;i<data.data.length;i++){
               		color_value_history=data.data[i][1];
               		var arrall_history = new Array();
               		for(var j=0;j<data.data[i][0].length;j++){
               			var arr_history= new Array();
               			arr_history.push(parseFloat(data.data[i][0][j].clat));
               			arr_history.push(parseFloat(data.data[i][0][j].clng));
               			arrall_history.push(arr_history)
               		}
               		arr_history_all_road.push(arrall_history)
               		}
               		for(var k=0;k<arr_history_all_road.length;k++){
               		  geomLayers[type] = NGR.polyline(arr_history_all_road[k], {
						    layerType: "Navi",type:"MultiLineString",color: data.data[k][1],arrow:true,  weight : 2,  fillColor : data.data[k][1], radius: 0.5,
					        dashArray: [5, 10],
					        fillOpacity: 1,opacity:1,lineCap:"round",lineJoin:"round"
						});
						arr_layer_road.push(geomLayers[type]);
               		}
               		//]]>
                },
                error:function (error) {
					
                }
            })//ajax
}


function routeAjax(ifloor){
 $.ajax({
                url:"../home/findline",
                type:"post",
                dataType:"json",
                async: false ,
                data:{
                "ifloor":ifloor,
                "iaddtype":1
              
                },
                success:function (data) {
               		 
               		//<![CDATA[
               		for(var i=0;i<data.data.length;i++){
               		color_value_history=data.data[i][1];
               		var arrall_history = new Array();
               		for(var j=0;j<data.data[i][0].length;j++){
               			//console.log(data.data[i][0][j].clat)
               			var arr_history= new Array();
               			arr_history.push(parseFloat(data.data[i][0][j].clat));
               			arr_history.push(parseFloat(data.data[i][0][j].clng));
               			arrall_history.push(arr_history)
               		}
               		arr_history_all_route.push(arrall_history)
               		//console.log(arr_history_all_route)
               		
               		}
               		for(var k=0;k<arr_history_all_route.length;k++){
               		  geomLayers[type] = NGR.polyline(arr_history_all_route[k], {
						    layerType: "Navi",type:"MultiLineString",color: data.data[k][1],arrow:true,  weight : 2,  fillColor : data.data[k][1], radius: 0.5,
					        dashArray: [5, 10],
					        fillOpacity: 1,opacity:1,lineCap:"round",lineJoin:"round"
						});
						//console.log(geomLayers[type])
						arr_layer_route.push(geomLayers[type]);
               		}
               		 console.log("读取路线")
               		//]]>
                },
                error:function (error) {
					
                }
            })//ajax
}

function fireAjax(ifloor){
	$.ajax({
                url:"../firecontrolfacilities/findItems",
                type:"post",
                dataType:"json",
                 async: false ,
                data:{
                "ifloor":ifloor
                },
                success:function (data) {
               		pub(data);
                },
                error:function(error) {
					
                }
            })


}


	function pub(data){
				//<![CDATA[
               		for(var i=0;i<data.length;i++){
               		if(data[i].istatus==0){
               			 var tempmarker =NGR.marker([data[i].clat,data[i].clng],{
					    	icon: NGR.icon({
					      iconUrl: '../assets/img/fire.png',
					      iconSize: [25, 25]
					    })
					  });
					}else{
					 var tempmarker =NGR.marker([data[i].clat,data[i].clng],{
					    	icon: NGR.icon({
					      iconUrl: '../assets/img/firered.png',
					      iconSize: [25, 25]
					    })
					  });
					
					}
					
               		markersLayer_fire.addLayer(tempmarker);
               		}
               		//]]> 
}

function nowAjax(ifloor){
	$.ajax({
                url:"../position/findnow",
                type:"post",
                dataType:"json",
                 async: false ,
                data:{
                "ifloor":ifloor
                },
                success:function (data) {
               		pub1(data);
                },
                error:function(error) {
					
                }
            })


}

		function pub1(data){
				//<![CDATA[
				console.log(data)
               		for(var i=0;i<data.length;i++){
               			
               			 var tempmarker =NGR.marker([data[i].clat,data[i].clng],{
					    	icon: NGR.icon({
					      iconUrl: '../assets/img/now.png',
					      iconSize: [25, 25]
					    })
					  });
					
					markersLayer_point.addLayer(tempmarker);
               		}
               		//]]> 
}
</script>
</body></html>

